<script setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
// 引入赠送弹窗
import Give from '@/components/Give.vue';
// 引入提货弹窗
import NotifyShipment from '@/components/NotifyShipment.vue';
import { reactive } from 'vue'
// 全局数据
const data = reactive({
  list: [
    // {
    //   orderNo: '334374658690785764',
    //   status: 1,
    //   shopList: [
    //     {
    //       imageUrl: 'https://cdn.uviewui.com/uview/goods/2.jpg',
    //       name: '黑金版',
    //       spec: '规格：8瓶',
    //       num: 2,
    //     },
    //     {
    //       imageUrl: 'https://cdn.uviewui.com/uview/goods/2.jpg',
    //       name: '黑金版',
    //       spec: '规格：8瓶',
    //       num: 1,
    //       price: 2,
    //     }
    //   ]
    // },
    // {
    //   orderNo: '334374658690785764',
    //   status: 1,
    //   shopList: [
    //     {
    //       imageUrl: 'https://cdn.uviewui.com/uview/goods/2.jpg',
    //       name: '黑金版',
    //       spec: '规格：8瓶',
    //       num: 2,
    //     }
    //   ]
    // }
  ],
  page: 1,
  status: 'loadmore',
  checkedArr: [],
  unlockNum: 1,
  showGive: false, // 显示赠送组件
  showNotifyShipment: false // 显示提货组件
})
// 首次加载
onLoad(options => {
  // getList()
})
// 监听页面滚动到底部
onReachBottom(() => {
  // getList()
})
// 查询充值记录列表
function getList() {
  // console.log('优惠券页面', data.page)
  // if (data.page >= 3) return
  // data.status = 'loading'
  // setTimeout(() => {
  //   for (let i = 0; i < 20; i++) {
  //     data.list.push({
  //       name: '优惠券名称',
  //       rule: '满¥100可用',
  //       amount: '100.00',
  //       time: '2024.02.30 09:00'
  //     })
  //   }
  //   data.page++
  //   data.status = data.page >= 3 ? 'nomore' : 'loadmore'
  // }, 2000);
}
// 前往待解锁页面
const goPrizePage = () => {
  uni.navigateTo({
    url: '/subPackage/my/goods/prize'
  })
}
</script>

<template>
  <view class="goods-page">
    <!-- 空状态 -->
    <up-empty v-if="data.list.length <= 0" mode="list" text="暂无物品" marginTop="200rpx"></up-empty>
    <!-- 订单列表 -->
    <view v-else class="list">
      <up-checkbox-group v-model="data.checkedArr" placement="column" inactiveColor="#CCCCCC" activeColor="#FFC870"
        @change="checkedChange">
        <view class="item" v-for="item in data.list" :key="item">
          <!-- 头部 -->
          <view class="head">
            <view class="order-no">订单单号: {{ item.orderNo }}</view>
            <up-checkbox shape="circle" :name="item" label=""></up-checkbox>
          </view>
          <!-- 商品列表 -->
          <view class="shop-list">
            <view class="shop-item" v-for="(shopItem, j) in item.shopList" :key="j">
              <view class="img-box">
                <image style="width: 168rpx; height: 168rpx;" :src="shopItem.imageUrl" mode="scaleToFill" />
              </view>
              <view class="info">
                <view class="name up-line-2">
                  <text>{{ shopItem.name }}</text>
                </view>
                <view class="spec up-line-2">
                  <text>{{ shopItem.spec }}</text>
                </view>
                <view class="num">
                  <text>数量: x{{ shopItem.num }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </up-checkbox-group>
      <!-- 加载更多 -->
      <up-loadmore :status="data.status" :loading-text="`努力加载中`" :loadmore-text="'加载更多'" :nomore-text="'没有更多了'" />
    </view>
    <!-- 待解锁悬浮按钮 -->
    <!-- <view class="unlock-btn-box" @click="goPrizePage">
      <text>待解锁</text>
      <up-badge :type="type" :value="data.unlockNum" :absolute="true" :offset="['0rpx', '0rpx']"></up-badge>
    </view> -->
    <!-- 底部栏 -->
    <view class="bottom-bar">
      <view class="content">
        <view class="give-btn">
          <up-button disabled text="赠送" type="primary" shape="circle" :plain="true"
            @click="data.showGive = true"></up-button>
        </view>
        <view class="take-btn">
          <up-button disabled text="提货" type="primary" shape="circle"
            @click="data.showNotifyShipment = true"></up-button>
        </view>
      </view>
    </view>
    <!-- 赠送弹窗 -->
    <Give :show="data.showGive" @close="data.showGive = false" />
    <!-- 提货弹窗 -->
    <NotifyShipment :show="data.showNotifyShipment" type="2" @close="data.showNotifyShipment = false" />
  </view>
</template>

<style lang="scss" scoped>
.goods-page {
  box-sizing: border-box;
  padding: 28rpx 32rpx;
  padding-bottom: 182rpx;
  min-height: 100vh;
  background-color: #F9F9F9;

  // 订单列表
  & .list {
    & .item {
      padding: 0 32rpx;
      margin-bottom: 20rpx;
      background: #FFFFFF;
      border-radius: 10rpx 10rpx 10rpx 10rpx;

      // 头部
      & .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 28rpx 0;
        border-bottom: 1rpx solid #F6F6F6;

        // 订单号
        & .order-no {
          font-weight: 400;
          font-size: 24rpx;
          color: #333333;
        }

        // 复选框
        &::v-deep .u-checkbox {
          & .u-checkbox__icon-wrap {
            margin-right: 0;
          }
        }
      }
    }

    // 商品列表
    & .shop-list {
      padding: 32rpx 0;

      & .shop-item {
        display: flex;
        margin-top: 24rpx;

        &:first-child {
          margin-top: 0;
        }

        // 商品图片
        & .img-box {
          width: 168rpx;
          height: 168rpx;
          overflow: hidden;
          border-radius: 10rpx;
        }

        // 商品信息
        & .info {
          margin-left: 16rpx;
          width: 446rpx;

          & .name {
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          & .spec {
            margin-top: 16rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #9B9B9B;
          }

          & .num {
            margin-top: 8rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #9B9B9B;
          }
        }
      }
    }
  }

  // 待解锁悬浮按钮
  & .unlock-btn-box {
    position: fixed;
    bottom: 270rpx;
    right: 24rpx;
    width: 120rpx;
    height: 120rpx;
    line-height: 120rpx;
    text-align: center;
    font-weight: 500;
    font-size: 24rpx;
    color: #FFFFFF;
    border-radius: 50%;
    background: linear-gradient(174deg, #FFC05B 0%, #FF6B00 100%);
    box-shadow: 0px 9.5px 11.2px rgba(0, 0, 0, 0.10);
  }

  // 底部栏
  & .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 172rpx;
    background: #FFFFFF;
    border-top: 1rpx solid #E9E9EB;

    & .content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 12rpx 40rpx;

      // 赠送按钮
      & .give-btn {
        width: 220rpx;

        &::v-deep .u-button {
          height: 88rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #FFA618;
          border-radius: 112rpx;
          border: 2rpx solid #FFA618;
        }
      }

      // 提货按钮
      & .take-btn {
        width: 434rpx;

        &::v-deep .u-button {
          height: 88rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #FFFFFF;
          background: #FFA618;
          border-radius: 112rpx;
          border: none;

        }
      }
    }
  }
}
</style>